(function () {
  // 步骤1：创建echarts实例
  let myChart = echarts.init(document.querySelector(".echarts4"));

  // 步骤2：定义配置（指定图表的配置项和数据）
  let option = {
    grid: {
      left: 15,
      right: 20,
      top: 20,
      bottom: 0,
    },
    xAxis: [{ show: false }],
    yAxis: [
      {
        axisLine: "none",
        axisLabel: {
          verticalAlign: "bottom",
          align: "left",
          padding: [0, 0, 15, 10],
          textStyle: {
            color: "#fff",
            fontSize: "14",
          },
        },
        data: [
          "1 【蜜雪冰城】水果茶",
          "2 【全聚德】烤鸭",
          "3 【全聚德】烤鸭",
          "4【蜜雪冰城】水果茶",
          "5 【全聚德】烤鸭",
        ],
        inverse: true,
      },
      {
        axisLine: "none",
        data: [
          "314,529,403.31",
          "314,529,403.31",
          "314,529,403.31",
          "314,529,403.31",
          "314,529,403.31",
        ],

        axisLabel: {
          verticalAlign: "bottom",
          align: "right",
          padding: [0, 10, 15, 0],
          textStyle: {
            color: "#282828",
            fontSize: "14",
          },
          formatter: function (value) {
            // return '{x|' + value + '%' + '}'
            return "{x|" + value + "}";
          },
          rich: {
            x: {
              color: "#ccc",
              fontSize: 14,
            },
          },
        },
      },
      {
        axisLine: "none",
        data: [],
      },
    ],
    series: [
      {
        type: "bar",
        data: [70, 30, 20, 60, 80],
        barWidth: 8,
        itemStyle: {
          normal: {
            color: {
              colorStops: [
                {
                  offset: 0,
                  color: "rgb(255, 128, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(200, 106, 255, 0.8)",
                },
              ],
            },
          },
        },
      },
      {
        type: "bar",
        yAxisIndex: 2,
        data: [100, 100, 100, 100, 100],
        barWidth: 8,
        itemStyle: {
          normal: {
            color: "#504778",
          },
        },
        z: 0,
      },
    ],
  };

  // 步骤3：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // 步骤4：监控网页视口
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
